<template>
    <div class="app_config">
        <div class="form-item-box clear-both">
            <div class="form-item-left">应用信息：</div>
            <div class="form-item-right">
                <div class="key-content">
                    <div class="key-list">
                        <span class="key-name text-center">APP ID: </span>
                        <span class="key-value">mc_t6k3g2d8rx7vnnk</span>                    
                    </div>
                    <div class="key-list">
                        <span class="key-name text-center">APP ID: </span>
                        <span class="key-value">mc_t6k3g2d8rx7vnnk</span>                    
                    </div>
                </div>
            </div>
        </div>

        <div class="form-item-box clear-both">
            <div class="form-item-left">我的奖品：</div>
            <div class="form-item-right">
               <div class="list-link">
                    <span class="link-name text-center">公众号：</span>
                    <span><el-input v-model="form.wxApp" placeholder="公众号"></el-input></span>
                    <el-button type="primary">复制链接</el-button>
               </div> 
               <div class="list-link">
                    <span class="link-name text-center">app：</span>
                    <span><el-input v-model="form.app" placeholder="公众号"></el-input></span>
                    <el-button type="primary">复制链接</el-button>
               </div> 
            </div>
        </div>

        <div class="form-item-box clear-both">
            <div class="form-item-left">回调接口：</div>
            <div class="form-item-right">
                <el-input v-model="form.port" class="port-link" placeholder="请输入链接地址： http://..."></el-input>
                <div class="hit-info">
                   <p>用户抽奖、兑奖事件回调接口。</p> 
                   <span>填入接口，点击保存时，系统会向接口发起一个 TEST_CALLBACK 的事件，所以，开发者必须先完善接口，正确返回SUCCESS字符串后，才能保存。以此来确认开发者所填的接口地址真实有效。</span> 
                </div>
            </div>
        </div>
        <div class="submit-btn"> <el-button type="primary">保存</el-button> </div>
        
    </div>
</template>

<script>
	import * as api from './../../api/api';
    import Vue from 'vue';
export default {
    data(){
        return {
            form:{
                wxApp:'',
                app:'',
                port:'',
            }
        }
    },
    mounted(){
        
    },
    computed: {

    },
    methods: {

    }
    
}
</script>

<style lang="less" scoped>
.app_config{
    background:#fff;
    padding:40px;
    .form-item-box{
        margin-bottom: 15px;
        font-size: 14px;
        .form-item-left{
            float: left;
            line-height: 34px;
            color:#666666;
            width:88px;
            box-sizing: border-box;
        }
        .form-item-right{
            float: left;
            width: 430px;
            min-height: 34px;
            line-height:34px;
            .key-content{
                width:600px;
                height:130px;
                border:1px solid #ddd;
                .key-list{
                    padding:15px 20px;
                    &:last-child{
                        border-top:1px solid #ddd;
                    }
                    span{
                        display:inline-block;  
                    }
                    .key-name{
                        color:#888;
                        width:100px;
                    }
                    .key-value{
                        color:#ec5463;
                    }
                }
            }
            .list-link{
                margin-bottom:10px;
                span{
                    display:inline-block;
                }
                .link-name{
                    width:90px;
                    color:#666666;
                }
                
            }
            .hit-info{
                color:#999;
                line-height:20px;
                margin-top:10px;
            }
        }

        
    }
    .submit-btn{
        padding-left:30px;
        margin:40px 0;
    }
}
</style>
